<template>
  <el-dialog @close="close" v-model="dialogVisible" :title="title" width="72%">
    <div class="table-inner">
      <el-table class="table" v-loading="loading" :data="list" border>
        <!-- <template #empty><el-empty description="暂无数据" /></template> -->
        <el-table-column prop="name" label="房间名称" align="center" />
        <el-table-column prop="number" label="房间编号" align="center" />
        <el-table-column
          prop="introduction"
          :show-overflow-tooltip="true"
          label="房间介绍"
          align="center"
        />
        <el-table-column prop="update_time" label="更新时间" align="center" />
        <el-table-column prop="operator" label="操作" width="100px" align="center">
          <template #default="scope">
            <el-button @click="del(scope.row)" type="danger" size="small" icon="Delete">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination">
      <el-pagination
        v-model:currentPage="query.page"
        :page-size="query.limit"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script lang="ts" setup>
import { ElMessageBox, ElMessage, FormInstance, ElNotification } from 'element-plus'
import { reactive, ref } from 'vue'
import { roomList, editRoom, deleteRoom } from '@/api/admin'
import { useRoute } from 'vue-router'
const route = useRoute()
const dialogVisible = ref<boolean>(false)
const title = ref('房间列表')
const loading = ref(false)
const list = ref()
const total = ref(0)
const query = reactive({
  platform_id: route.query.id,
  department_id: '',
  page: 1,
  limit: 10,
})

function close() {
  query.id = ''
  query.page = 1
  query.limit = 10
  list.value = []
  total.value = 0
}

const show = (item = {}) => {
  query.department_id = item.id
  title.value = item.name + '房间列表'
  dialogVisible.value = true
  getList()
}

const getList = () => {
  loading.value = true
  roomList(query).then((res) => {
    if (res.code == 200) {
      list.value = res.data.data
      total.value = res.data.count
    } else {
      dialogVisible.value = false
    }
    loading.value = false
  })
}

const del = (row) => {
  ElMessageBox.confirm(`你确定要删除科室 “${row.name}” 吗?`, '温馨提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
    draggable: true,
  }).then(() => {
    deleteRoom({
      department_id: query.department_id,
      id: row.id,
    }).then((res) => {
      if (res.code == 200) {
        ElNotification({
          title: res.data,
          message: res.msg,
          type: 'success',
        })
        getList()
      }
    })
  })
}
const handleSizeChange = (val: number) => {
  query.page = 1
  query.limit = val
  getList()
}

const handleCurrentChange = (val: number) => {
  query.page = val
  getList()
}
const changeStatus = (row) => {
  ElMessageBox.confirm(
    `确定要${!row.status ? '禁用' : '启用'}房间 “${row.name}” 吗？`,
    '温馨提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    },
  )
    .then(() => {
      editRoom({
        id: row.id,
        status: row.status,
      }).then((res) => {
        if (res.code == 200) {
          ElNotification({
            title: `${!row.status ? '禁用' : '启用'}成功`,
            message: res.msg,
            type: 'success',
          })
        } else {
          if (row.status == 0) row.status = 1
          else if (row.status == 1) row.status = 0
        }
      })
    })
    .catch(() => {
      if (row.status == 0) row.status = 1
      else if (row.status == 1) row.status = 0
    })
}

defineExpose({
  show,
})
</script>
<style lang="scss" scoped>
.pagination {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  padding-top: 20px;
  box-sizing: border-box;
  flex-shrink: 0;
}
</style>

